<template>
	<view class="page">
		<!-- 其他页面内容 -->
		<!-- 导航栏 -->
		<!-- <view class="top">
			<image src="../../../static/ic_back.png" mode="" class="topimage" bindtap="goBack"></image>
			<view class="toptxt">确认订单</view>
		</view> -->

		<view class="white-box">
			<image src="../../../static/ic_location.png" mode="" class="li"></image>
			<view class="litxt">
				李先生
			</view>
			<view class="licall">
				152****0235
			</view>
			<view class="lidizi">
				江苏省南京市玄武区 中国南京软件谷 XX路18号XX云楼N13食堂B1椰椰
			</view>
			<image src="../../../static/ic_point.png" mode="" class="liicon"></image>
		</view>

		<view class="detail">
			<image src="../../../static/product001.png" mode="" class="sjtu"></image>
			<view class="sjname">
				【XXXX40 Pro】XXXX40 Pro 5G手机
			</view>
			<view class="sjxh">
				珠光白，8+256G
			</view>
			<view class="sjrmb">
				￥6399
			</view>
			<view class="sjshu">
				x1
			</view>
			<view class="ps">
				配送
			</view>
			<view class="pspro">
				标准配送
			</view>
			<view class="separator"></view>
			<view class="fp">
				发票
			</view>
			<view class="fppro">
				电子普通发票-个人
			</view>
			<image src="../../../static/ic_point.png" mode="" class="fpicon"></image>
		</view>



		<view class="bottom">
			<view class="left-text">￥6399</view>
<view class="submit" @click="submitOrder">提交订单</view>
		</view>


	</view>

</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const timeoutId = ref(null);
// 定义goBack方法，用于处理返回上一页的逻辑
const goBack = () => {
  uni.navigateBack({
    delta: 1 // 返回上一页
  });
};

// 提交订单的方法
const submitOrder = () => {
  // 这里可以添加提交订单的逻辑，例如验证数据等
  
  // 跳转到支付页面
  uni.navigateTo({
    url: '/pages/tabBar/pay/pay', // 修正后的路径
    success: function () {
      console.log('跳转成功');
    },
    fail: function (error) {
      console.error('跳转失败', error);
    }
  });
};
// 使用onLoad生命周期钩子接收数据
 onMounted(() => {
      // 创建定时器，并存储返回的ID
      timeoutId.value = setTimeout(() => {
        // 定时器回调函数
        console.log('定时器触发');
      }, 2000);
    });

    onUnmounted(() => {
      // 清除定时器
      if (timeoutId.value) {
        clearTimeout(timeoutId.value);
      }
    });
</script>

<style lang="scss">
	.page {
		position: relative;
		background-color: #f2f4f5;
		height: 100vh;
		overflow: auto;
		/* 允许页面内容滚动 */
	}

	.top {
		position: relative;
		/* 确保.top是相对定位，以便topimage可以绝对定位 */
		display: flex;
		/* 使用Flexbox布局 */
		align-items: center;
		/* 垂直居中对齐所有项目 */
		justify-content: center;
		/* 水平居中对齐所有项目，如果不需要可以去掉 */
		padding-left: 80rpx;
		/* 为.top增加左边距，确保文本不与图片重叠 */


		.topimage {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 16rpx;
			left: 60rpx;
		}

		.toptxt {
			padding: 10rpx;
			text-align: center;
			font-size: 44rpx;
			margin-left: -260rpx;
			/* 为文本增加左边距，确保文本与图片有足够空间 */
		}
	}

	.white-box {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		height: 200rpx;
		width: 95%;
		
		margin-top: 20rpx;
		border-radius: 30rpx;
		background: white;

		.li {
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			top: 60rpx;
			left: 50rpx;
		}

		.litxt {
			position: absolute;
			top: 36rpx;
			left: 160rpx;
			font-weight: bold;
		}

		.licall {
			position: absolute;
			top: 36rpx;
			left: 300rpx;
			color: #919394;
		}

		.lidizi {
			position: absolute;
			top: 100rpx;
			left: 160rpx;
			font-size: 16rpx;
			color: #919394;
			max-width: 100%;
			width: 70%;
		}

		.liicon {
			width: 20rpx;
			height: 30rpx;
			position: absolute;
			top: 100rpx;
			left: 680rpx;
		}
	}

	.detail {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		height: 500rpx;
		width: 95%;;
		margin-top: 250rpx;
		border-radius: 30rpx;
		background: white;

		.sjtu {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			top: 40rpx;
			left: 40rpx;
		}

		.sjname {
			position: absolute;
			top: 40rpx;
			left: 260rpx;
			font-size: 12rpx;
			font-weight: bold;
			max-width: 100%;
			/* 确保文本容器宽度不超过其父容器的宽度 */
			width: 50%;
			/* 举例：设置宽度为90%，根据需要调整 */
		}

		.sjxh {
			position: absolute;
			top: 120rpx;
			left: 260rpx;
			font-size: 10rpx;
			color: #919394;
		}

		.sjrmb {
			position: absolute;
			top: 80rpx;
			left: 600rpx;
			font-size: 10rpx;
			font-weight: bold;
		}

		.sjshu {
			position: absolute;
			top: 120rpx;
			left: 660rpx;
			font-size: 10rpx;
			color: #919394;
		}

		.ps {
			position: absolute;
			top: 280rpx;
			left: 60rpx;
			font-size: 10rpx;
			font-weight: bold;
		}

		.pspro {
			position: absolute;
			top: 280rpx;
			left: 600rpx;
			font-size: 10rpx;
			font-weight: bold;
		}

		.separator {
			border-bottom: 1px solid #ddd;
			margin: 360rpx 0;
			width: 90%;
			left: 5%;
			position: relative;
		}

		.fp {
			position: absolute;
			top: 400rpx;
			left: 60rpx;
			font-size: 10rpx;
			font-weight: bold;
		}

		.fppro {
			position: absolute;
			top: 400rpx;
			left: 470rpx;
			font-size: 10rpx;
			font-weight: bold;
		}

		.fpicon {
			width: 20rpx;
			height: 30rpx;
			position: absolute;
			top: 400rpx;
			left: 680rpx;

		}
	}


	.bottom {
		border: 2rpx solid #ddd;
		position: fixed;
		bottom: 0;
		left: 0;
		/* 左侧对齐 */
		right: 0;
		/* 右侧对齐，确保它覆盖整个页面宽度 */
		display: flex;
		/* 使.bottom成为Flex容器 */
		justify-content: flex-end;
		/* 将内容对齐到容器的末端 */
		align-items: center;
		/* 垂直居中对齐所有项目 */


		.left-text {
			margin-right: auto;
			color: #fe014b;
			font-size: 44rpx;
			font-weight: bold;
		}

		.submit {
			width: 360rpx;
			height: 60rpx;
			padding: 10rpx;
			margin: 10rpx;
			background: #fe014b;
			color: white;
			border-radius: 50rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 32rpx;
		}
	}
</style>
